<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="style/fjol_style.css"/>
		<link rel="stylesheet" type="text/css" href="style/xol_style.css"/>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav newbgRed">
		    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
		    <h1 class="mui-title">经纪人详情</h1>
		</header>
		<div class="mui-content" style="margin-bottom: 40px;">
		    <div class="mui-row p10 pt5 bg-white flex" id="agentBox">
		        
		    </div>
		    <div class="newRed f10 mt10 mb10 p10">最新评价</div>
		    <ul class="mui-table-view" id="agentCommentList">
		            
		        </ul>
		        <div class="newRed f10 mt10 mb10 p10">待售房源</div>
		        <ul class="mui-table-view" id="recommendHouse">
		           
		        </ul>
		</div>
		
		<script src="js/mui.min.js"></script>
		<script src="js/jquery-2.1.0.js"></script>
		<script src="js/jquery.tmpl.min.js"></script>
		<script src="js/generalUtil.js"></script>
		<script src="js/md5.js"></script>
		<script src="js/network.js"></script>
		<script src="js/fj_area_util.js"></script>
		<script src="js/fj_base_data.js"></script>
		<script src="js/xzx.open.js"></script>
		<!-- 经纪人 -->
		<script id="agentTmpl" type="text/x-jquery-tmpl">
			
	        <div class="">
    			{{if headImgUrl}}
	            <img class="mui-pull-left mr5" width="80" src="${headImgUrl}">
	            {{else}}
	            <img class="mui-pull-left mr5" width="80" src="images/icon_default_header@2x.png">
	            {{/if}}
    		</div>
	        <div class="flexCell bre agentDetail" id="${userId}">
	        		
		        	<div class="">
		                <span>${realname}</span>
		                <span>
        				{{each $item.agentStarFull()}}
	                	<i data-index='0' class="mui-icon mui-icon-star-filled"></i>
	                	{{/each}}
	                	{{if $item.agentStarHalf()}}
						<i data-index='1' class="mui-icon mui-icon-starhalf"></i>
						{{/if}}
						{{each $item.agentStar()}}
						<i data-index='2' class="mui-icon mui-icon-star"></i>
						{{/each}}
        				</span>
		                <p class="f08">${area}</p>
		        	</div>
		        	<div class="flex mui-text-center f08 mt5" style="align-items: flex-start;">
		        		<div class="flexCell bre">
		        			<p class="f10">已服务人数</p>
		        			<h4 class="newRed">${serviceTotal}</h4>
		        		</div>
		        		<div class="flexCell">
		        			<p class="f10">在售套数</p>
		        			<h4 class="newRed">${secondHouseCount}</h4>
		        		</div>
		        	</div>
		        </div>
		        <div class="agentMobile" id="agentMobile" data-mobile='${mobile}'>
		        	<img src="imageNew/icon_agent_call_whit@2x.png" width="80"/>
		        </div>
		</script>
		<!-- 最新评价 -->
		<script id="agentCommentTmpl" type="text/x-jquery-tmpl">
			<li class="mui-table-view-cell">
                <div class="mui-clearfix">
                	<span>${$item.setRealName()}</span>
                	<p class="mui-pull-right">
                		${$item.getCreatDate()}
                	</p>
                </div>
                <div>
                	{{each $item.setScoreStarfilled()}}
                	<i data-index='0' class="mui-icon mui-icon-star-filled"></i>
                	{{/each}}
                	{{if $item.setScoreStarhalf()}}
					<i data-index='1' class="mui-icon mui-icon-starhalf"></i>
					{{/if}}
					{{each $item.setScoreStar()}}
					<i data-index='2' class="mui-icon mui-icon-star"></i>
					{{/each}}
                </div>
                <div>
                	${content}
                </div>
            </li>
		</script>
		<!-- 在售房源 -->
		<script id="recommendHouseTmpl" type="text/x-jquery-tmpl">
			<li class="mui-table-view-cell pb10" id="${id}">
		        <!--<a href="javascript:;" class="" style="padding-right:20px;">
		            <div class="mui-pull-left mr5" style="border-radius: 4px;width: 100px; height: 75px; overflow: hidden;">
		        		{{if coverImage}}
		        		<img src="${coverImage}">
		        		{{else}}
		        		<img src="images/icon_blank.png" style="max-width: 100%; max-height: 75px;">
		        		{{/if}}
		        	</div>
		            <div class="mui-media-body" style="white-space: normal;">
		                <span style="font-weight: bold;">${title}</span>
		                <div class="mui-clearfix">
		                	<p class="mui-ellipsis f08 m0">${bedRoomNumber}室 ${livingRoomNumber}厅 ${square}平</p>
		                	<div class="mui-text-right newRed">								
									<span class="f12" style="font-weight: bold;">${squarePrice}</span>
									<span class="f08">元/平</span> 
							</div>
		                	<p class="mui-ellipsis f08 m0">${area} ${buildingName}</p>
		                	<div class="f08">
		                		{{if keyword}}
		                		{{each(i,word) $item.getKeyword()}}
									<button class="mui-btn ${word.className} keyword-btn f08">${word.value}</button>
						    	{{/each}}
						    	{{/if}}
		                	</div>
		                	
		                </div>
		            </div>
		        </a>-->
		        <a href="javascript:;" class="" style="padding-right:20px;">
					<div class="mui-pull-left mr5" style="width: 90px; height: 65px; overflow: hidden;">
		        		{{if coverImage}}
		        		<img src="${coverImage}">
		        		{{else}}
		        		<img src="images/icon_blank.png" style="max-width: 100%; max-height: 75px;">
		        		{{/if}}
		        	</div>
					<div class="mui-media-body" style="white-space: normal;">
						<span style="font-weight: bold;">${title}</span>
						
							<div class="flex" style="color:#ef263a;">
								<p class="flexCell f08 m0">${bedRoomNumber}室 ${livingRoomNumber}厅 ${square}平</p>
								<div class="">
									<span style="font-weight: bold;font-size: 13px;">${squarePrice}</span>
									<span class="f08">元/平</span> 
								</div>
							</div>
							<p class="mui-ellipsis f08 m0">${area} ${buildingName}</p>
							<div class="f08">
								{{if keyword}} {{each(i,word) $item.getKeyword()}}
								<button class="mui-btn ${word.className} keyword-btn f08">${word.value}</button> {{/each}} {{/if}}
							</div>
							
					</div>
				</a>
		    </li>
		</script>
		<script type="text/javascript">
			mui.init();
			mui.plusReady(function(){
				var wv = plus.webview.currentWebview();
				var agentData = wv.agentData;
				console.log(JSON.stringify(agentData));
				$('#agentTmpl').tmpl(agentData,{
					agentStarFull: function(){
						var commentScore = this.data.commentScore;
						var commentTotal = this.data.commentTotal;
						var score = commentTotal==0?0 : parseInt(commentScore/commentTotal);
						var starStr = [];
//						console.log(score);
						starStr.length = parseInt(score);
						return starStr;
					},
					agentStarHalf: function(){
						var commentScore = this.data.commentScore;
						var commentTotal = this.data.commentTotal;
						var score = commentTotal==0?0 : parseInt(commentScore/commentTotal);
						var halfScore = parseInt(score);
						if(halfScore>score){
							return true;
						}else{
							return false;
						}
					},
					agentStar: function(){
						var commentScore = this.data.commentScore;
						var commentTotal = this.data.commentTotal;
						var score = commentTotal==0?0 : parseInt(commentScore/commentTotal);
						var rest = parseInt(5-score);
						var starStr = [];
						starStr.length = parseInt(rest);
						return starStr;
					}
				}).appendTo('#agentBox');
				
				document.querySelector('#agentMobile').addEventListener('tap',function(){
					event.stopPropagation();
					var mobile = $(this).data('mobile');
					console.log(mobile);
					var btnArray = ['拨打', '取消'];
					mui.confirm('是否拨打' + mobile + '?', '提示', btnArray, function(e) {
						if(e.index == 0) {
							plus.device.dial(mobile, false);
						}
					});
				});
				
				var salemanId = agentData.id;
				var salemanParam = [{
					key:'salemanId',
					value:salemanId
				},{
					key:'page',
					value:1
				},{
					key:'rows',
					value:20			//最新显示5条记录
				}];
				
				//销售人员的评价列表
				fjNetwork.get('fjzx/common/saleman-comment-list.json',salemanParam,function(data){
//					console.log(JSON.stringify(data));
					var rows = data.rows;
					$('#agentCommentTmpl').tmpl(rows,{
						getCreatDate:function(){
							var createDate = new Date(this.data.createDate);
							return createDate.toLocaleString();
						},
						setRealName:function(){
							var realName = this.data.realname;
							var regName = /^(.).+(.)$/g;
							if (realName.length<=4){ 
								realName = realName.replace(regName, "$1*$2");
							}
							return realName;
						},
						setScoreStarfilled:function(){
							var score = this.data.score;
							var starStr = [];
							starStr.length = parseInt(score);
							return starStr;
						},
						setScoreStarhalf:function(){
							var score = this.data.score;
							var scoreInt = parseInt(score);
							if(score>scoreInt){
								return true;
							}else{
								return false;
							}
						},
						setScoreStar:function(){
							var score = this.data.score;
							var elseScore = 5 - score;
							var scoreArr = [];
							scoreArr.length = parseInt(elseScore);
							return scoreArr;
						}
					}).appendTo('#agentCommentList');
				},function(msg){
					mui.toast(msg);
				});
				//推荐房源
				var areaIdentId = agentData.areaIdentId;
				var recommendParam = [{
					key:'salemanId',
					value:salemanId
				},{
					key:'kind',
					value:2
				},{
					key:'houseStatusEnumValue',
					value:1
				},{
					key:'page',
					value:1
				},{
					key:'rows',
					value:20
				}];
				fjNetwork.get('fjzx/saleman/salemanHouseList.json',recommendParam,function(data){
//					console.log(JSON.stringify(data));
					var rows = data.rows;
					$('#recommendHouseTmpl').tmpl(rows,{
						getKeyword:function(){
							var keyword = this.data.keyword;
							if(keyword){
								var keywordArr = keyword.split(',');
								var keywordCls = [
									'keyword-color1 ',
									'keyword-color2 ',
									'keyword-color3 ',
									'keyword-color4 '
								];
								var keywordData = new Array();
								for (i in keywordArr) {
									var random = i % keywordCls.length;
									keywordData[i] = {
										className:keywordCls[random],
										value:keywordArr[i]
									};
								}
								return keywordData;
							}else{
								return keyword='';
							}
							
						}
					}).appendTo('#recommendHouse');
					
					var imgObj = $('#recommendHouse img');
					var RATE = 0.75;	//常量，图片框比例
					imgObj.each(function(){
						$(this).load(function(){
							var rate = parseFloat($(this).height()/$(this).width());
							if(rate<RATE){		//高度不够
								$(this).css('height','75px');
								$(this).css('width',$(this).height()/rate);
							}else{				//宽度不够
								$(this).css('width','100px');
								$(this).css('height',$(this).width()*rate);
							}
							if($(this).width()>100){
								var marginLeft = parseInt(-($(this).width()-100)*0.5);
								$(this).css('margin-left',marginLeft);
							}
							if($(this).height()>75){
								var marginTop = parseInt(-($(this).height()-75)*0.5);
								$(this).css('margin-top',marginTop);
							}
						});
					});
				},function(msg){
					mui.toast(msg);
				});
				
				//房屋详情
				mui('#recommendHouse').on('tap','li',function(){
					var houseId = this.getAttribute('id');
					openWindowWithPage('house_detail',{
						houseId:houseId
					});
				});
				
			})
		</script>
	</body>

</html>